<!doctype HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<title>ThinkPHP上传图片模块</title>

<style>
body {
color: #333;
font-family: sans-serif;
font-size: 12pt;
line-height: 170%;
padding: 0 30px 0 270px;
}

header .banner {
margin: 0 0 1em 0;
}

header .banner, nav .banner {
color: #777;
font-size: 10pt;
font-weight: bold;
}

header h1 {
background: #0c3;
border-radius: 4px;
color: #fff;
font-size: 24pt;
margin: 0;
padding: 1.2em 0;
text-align: center;
}

nav {
font-size: 10pt;
overflow-x: auto;
overflow-y: auto;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 240px;
}

nav .menubar {
border-bottom: solid 1px #ccc;
display: none;
height: 48px;
line-height: 48px;
padding: 0 10px;
}

nav .button {
background: #777;
border: 1px solid #333;
color: #fff;
font-size: 10pt;
font-weight: bold;
padding: 8px;
border-radius: 4px;
}

nav ul {
padding: 0 0 0 10px;
}

nav ul a {
color: #333;
text-decoration: none;
}

nav ul a:hover {
text-decoration: underline;
}

nav li {
line-height: 180%;
list-style: none;
margin: 0;
padding: 0;
}

nav .level2 {
font-size: 11pt;
font-weight: bold;
}

nav .level3 {
padding-left: 1em;
}

nav .level3:before { 
content: "» ";
}

nav .level4 {
padding-left: 2em;
}

nav .level4:before {
content: "› ";
}

article h2 {
border-bottom: dotted 1px #777;
font-size: 36px;
line-height: 100%;
margin: 2em 0 1em 0;
height:50px;
line-height: 50px;
}

article h3 {
font-size: 30px;
height:30px;
line-height: 30px;
padding-left:5px;
color:#f94108;

}

article h4 {
font-size: 12pt;
font-style:bold;
font-weight: normal;
height:24px;
line-height:24px;
margin: 1.2em 0 1em 0;
padding: 10px;
color:#FFFFFF;
background:#f94108;
}

article p {
margin: 1em 0;
}

article p code {
background: #eee;
border: 1px solid #ccc;
}

article p strong {
color: #f00;
}

article pre {
background: #eee;
border-left: solid 3px #3c0;
font-size: 10pt;
line-height:16px;
margin: 1em 0;
padding: 0 0 0 1em;
overflow-x: auto;
overflow-y: padding;
}

article blockquote {
background: #fff;
border: dashed 1px #777;
border-left: solid 2px #777;
color: #000;
margin: 0;
padding: 0 0 0 1em;
}

article ul, article ol {
padding-left: 2em;
}

article img{}

footer {
border-top: 1px solid #ccc;
font-size: 10pt;
margin-top: 4em;
}

@media (max-width: 768px) {

body {
padding: 0 10px 0 230px;
}

nav {
width: 230px;
}

}

@media (max-width: 480px) {

body {
padding: 64px 10px 0 10px;
}

header .banner {
display: none;
}

nav {
position: absolute;
width: 100%;
}

nav .menubar {
display: block;
}

nav .banner {
float: right;
}

nav ul {
background: #fff;
display: none;
font-size: 14pt;
margin: 0;
padding: 0 0 0 8px;
}

nav .level2 {
font-size: 16pt;
font-weight: bold;
}

nav li {
line-height: 240%;
}

.index nav ul {
display: block;
}

.index article {
display: none;
}

}
</style>
<script>
  (function (tags) {
    var i = 0, len = tags.length;

    for (; i < len; ++i) {
        document.createElement(tags[i]);
    }
  }([ 'header', 'nav', 'article', 'footer' ]));
</script>
</head>
<body>
<header>
<h1 id="-thinkphp-">龙之翼 ThinkPHP模块分析 开发文档</h1>

</header>
<nav>
<div class="menubar">
<a class="button">&#9776;&nbsp;索引</a>
</div>
<ul>
<li class="level2"><a href="#1">1、说明</a></li><li class="level2"><a href="#2">2、数据表</a></li><li class="level3"><a href="#2.1">pre_image</a></li><li class="level2"><a href="#3">3、ajax表单上传图片</a></li><li class="level3"><a href="#3.1">html文件</a></li><li class="level3"><a href="#3.2">php文件</a></li><li class="level2"><a href="#4">3、ajax表单上传图片</a></li><li class="level3"><a href="#4.1">html文件</a></li><li class="level3"><a href="#4.2">php文件</a></li><li class="level2"><a href="#5">1、纯HTML和PHP上传附件</a></li><li class="level3"><a href="#5.1">精简版 index.html</a></li><li class="level3"><a href="#5.2">精简版 action.php</a></li><li class="level3"><a href="#5.3">完整版 index.html</a></li><li class="level3"><a href="#5.4">完整版 action.php</a></li><li class="level2"><a href="#6">登录模块-代码分析</a></li><li class="level3"><a href="#6.1">LoginController.class.php</a></li><li class="level4"><a href="#6.1.1">login.html(ajax精简版)</a></li><li class="level4"><a href="#6.1.2">login.html(ajax完整版)</a></li><li class="level4"><a href="#6.1.3">login.html(form传参精简版)</a></li><li class="level3"><a href="#6.2">login.html(form完整版)</a></li></ul>

</nav>
<article>

<h2 id="1">1、说明</h2>
<p>上传图片模块包括form表单上传和ajax上传。<br>而这两个每一个都必须研究ThinkPHP3.1.2和ThinkPHP3.2.3版本，因为在实际项目中常常遇到这种情况！  </p>
<p>总的来说，包括以下几种情况：<br>1、TP3.2.3 form上传图片，下载<br>2、TP3.2.3 ajax上传图片<br>3、TP2.3.1 form上传图片<br>4、TP2.3.1 ajax上传图片  </p>

<h2 id="2">2、数据表</h2>
<p>总共涉及到一个数据表</p>
<h3 id="2.1">pre_image</h3>
<pre><code>CREATE TABLE IF NOT EXISTS `pre_image` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `image` varchar(200) NOT NULL COMMENT &#39;图像名称&#39;,
  `create_time` int(11) NOT NULL COMMENT &#39;图像上传时间&#39;,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8</code></pre>

<h2 id="3">3、ajax表单上传图片</h2>
<h3 id="3.1">html文件</h3>
<p>注意：这里必须有 <code>enctype=&quot;multipart/form-data&quot;</code></p>
<pre><code>&lt;form action=&quot;__URL__/upload&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;
    &lt;input type=&quot;file&quot; name=&quot;image&quot; id=&quot;img&quot;/&gt;
    &lt;input type=&quot;submit&quot; value=&quot;上传&quot; id=&quot;button&quot;&gt;
&lt;/form&gt;</code></pre>
<h3 id="3.2">php文件</h3>
<pre><code>/***
 * ThinkPHP3.2.3 图片上传
 * 功能：1）上传图片到uploads文件夹
 *       2）上传图片到数据库中
 */
public function upload(){
    if(!empty($_FILES)) {

        //上传图片到uploads文件夹 start
        $config = array(
            &#39;maxSize&#39;    =&gt;    3145728,
            &#39;rootPath&#39;  =&gt;     &#39;./Uploads/&#39;, // 设置附件上传根目录
            &#39;savePath&#39;  =&gt;     &#39;&#39;, // 设置附件上传（子）目录
            &#39;saveName&#39;   =&gt;    array(&#39;time&#39;), //time,uniqid 建议这两种
            &#39;exts&#39;       =&gt;    array(&#39;jpg&#39;, &#39;gif&#39;, &#39;png&#39;, &#39;jpeg&#39;),
            &#39;autoSub&#39;    =&gt;    true,
            &#39;subName&#39;    =&gt;    array(&#39;date&#39;,&#39;Ymd&#39;),
        );
        $upload = new \Think\Upload($config);// 实例化上传类
        $info = $upload-&gt;upload();
        //上传图片到uploads文件夹 end

        //上传图片到数据库中 start
        $data = array(
            &#39;image&#39;  =&gt; $config[&#39;rootPath&#39;].$info[image][savepath].$info[image][savename],
            &#39;create_time&#39; =&gt; NOW_TIME,
        );
        $list   = M(&#39;image&#39;)-&gt;add($data);
        //上传图片到数据库中 end

        //提示信息 start
        if ($list !== false)
        {
            $this-&gt;success(&#39;上传图片成功！&#39;);
        } else {
            $this-&gt;error(&#39;上传图片失败!&#39;);
        }
        //提示信息 end
    }
}</code></pre>

<h2 id="4">3、ajax表单上传图片</h2>
<p>说明：ajax不能上传文件。具体在这个网址有说 <a href="http://bbs.csdn.net/topics/390923200">http://bbs.csdn.net/topics/390923200</a><br>因此，对于ajax上传图片或者文件，就得考虑了！<br>中文文档  <a href="http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#sample3">http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#sample3</a><br>英文文档  <a href="http://malsup.com/jquery/form/#getting-started">http://malsup.com/jquery/form/#getting-started</a>  </p>
<h3 id="4.1">html文件</h3>
<p>注意：这里必须有 <code>enctype=&quot;multipart/form-data&quot;</code></p>
<pre><code>&lt;form action=&quot;__URL__/upload&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;
    &lt;input type=&quot;file&quot; name=&quot;image&quot; id=&quot;img&quot;/&gt;
    &lt;input type=&quot;submit&quot; value=&quot;上传&quot; id=&quot;button&quot;&gt;
&lt;/form&gt;</code></pre>
<h3 id="4.2">php文件</h3>
<pre><code>/***
 * ThinkPHP3.2.3 图片上传
 * 功能：1）上传图片到uploads文件夹
 *       2）上传图片到数据库中
 */
public function upload(){
    if(!empty($_FILES)) {

        //上传图片到uploads文件夹 start
        $config = array(
            &#39;maxSize&#39;    =&gt;    3145728,
            &#39;rootPath&#39;  =&gt;     &#39;./Uploads/&#39;, // 设置附件上传根目录
            &#39;savePath&#39;  =&gt;     &#39;&#39;, // 设置附件上传（子）目录
            &#39;saveName&#39;   =&gt;    array(&#39;time&#39;), //time,uniqid 建议这两种
            &#39;exts&#39;       =&gt;    array(&#39;jpg&#39;, &#39;gif&#39;, &#39;png&#39;, &#39;jpeg&#39;),
            &#39;autoSub&#39;    =&gt;    true,
            &#39;subName&#39;    =&gt;    array(&#39;date&#39;,&#39;Ymd&#39;),
        );
        $upload = new \Think\Upload($config);// 实例化上传类
        $info = $upload-&gt;upload();
        //上传图片到uploads文件夹 end

        //上传图片到数据库中 start
        $data = array(
            &#39;image&#39;  =&gt; $config[&#39;rootPath&#39;].$info[image][savepath].$info[image][savename],
            &#39;create_time&#39; =&gt; NOW_TIME,
        );
        $list   = M(&#39;image&#39;)-&gt;add($data);
        //上传图片到数据库中 end

        //提示信息 start
        if ($list !== false)
        {
            $this-&gt;success(&#39;上传图片成功！&#39;);
        } else {
            $this-&gt;error(&#39;上传图片失败!&#39;);
        }
        //提示信息 end
    }
}</code></pre>

<h2 id="5">1、纯HTML和PHP上传附件</h2>
<p>注：精简版拿firebug查看console，完整版可直接看！<br><a href="./download/upload01/index.html">精简版演示</a> <a href="/download/upload01.zip">精简版下载</a><br><a href="./download/upload02/index.html">完整版演示</a> <a href="/download/upload02.zip">完整版下载</a></p>
<h3 id="5.1">精简版 index.html</h3>
<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;jQuery+jqueryfrom上传附件&lt;/title&gt;
&lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;//cdn.bootcss.com/jquery.form/3.51/jquery.form.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;input id=&quot;fileupload&quot; type=&quot;file&quot; name=&quot;mypic&quot; value=&quot;上传附件&quot;&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function () {
    $(&quot;#fileupload&quot;).wrap(&quot;&lt;form id=&#39;myupload&#39; action=&#39;action.php&#39; method=&#39;post&#39; enctype=&#39;multipart/form-data&#39;&gt;&lt;/form&gt;&quot;);
    $(&quot;#fileupload&quot;).change(function(){
        $(&quot;#myupload&quot;).ajaxSubmit({
            dataType:  &#39;json&#39;,
            success: function(data) {
                var img = data.pic;
                console.log(img);
            },
            error:function(xhr){
                console.log(&quot;error&quot;);
            }
        });
    });
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h3 id="5.2">精简版 action.php</h3>
<pre><code>&lt;?php
    error_reporting(0);
    $picname = $_FILES[&#39;mypic&#39;][&#39;name&#39;];
    $picsize = $_FILES[&#39;mypic&#39;][&#39;size&#39;];
    if ($picname != &quot;&quot;) {
        if ($picsize &gt; 1024000) {
            echo &#39;图片大小不能超过1M&#39;;
            exit ;
        }
        $type = strstr($picname, &#39;.&#39;);
        if ($type != &quot;.gif&quot; &amp;&amp; $type != &quot;.jpg&quot;) {
            echo &#39;图片格式不对！&#39;;
            exit ;
        }
        $rand = rand(100, 999);
        $pics = date(&quot;YmdHis&quot;) . $rand . $type;
        //上传路径
        $pic_path = &quot;files/&quot; . $pics;
        move_uploaded_file($_FILES[&#39;mypic&#39;][&#39;tmp_name&#39;], $pic_path);
    }
    $size = round($picsize / 1024, 2);
    $arr = array(&#39;name&#39; =&gt; $picname, &#39;pic&#39; =&gt; $pics, &#39;size&#39; =&gt; $size);
    echo json_encode($arr);
    }
?&gt;</code></pre>
<h3 id="5.3">完整版 index.html</h3>
<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;jQuery+php实现ajax文件上传&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
.demo{width:620px; margin:30px auto}
.demo p{line-height:32px}
.btn{position: relative;overflow: hidden;margin-right: 4px;display:inline-block;*display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.btn input {position: absolute;top: 0; right: 0;margin: 0;border: solid transparent;opacity: 0;filter:alpha(opacity=0); cursor: pointer;}
.progress { position:relative; margin-left:100px; margin-top:-24px; width:200px;padding: 1px; border-radius:3px; display:none}
.bar {background-color: green; display:block; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; height:20px; display:inline-block; top:3px; left:2%; color:#fff }
.files{height:22px; line-height:22px; margin:10px 0}
.delimg{margin-left:20px; color:#090; cursor:pointer}
&lt;/style&gt;
&lt;script src=&quot;//cdn.bootcss.com/jquery/1.7.2/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.form.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;


&lt;div id=&quot;main&quot;&gt;
   &lt;div class=&quot;demo&quot;&gt;
           &lt;p&gt;说明：示例中只允许上传gif/jpg格式的图片，图片大小不能超过500k。&lt;/p&gt;
           &lt;div class=&quot;btn&quot;&gt;
            &lt;span&gt;添加附件&lt;/span&gt;
            &lt;input id=&quot;fileupload&quot; type=&quot;file&quot; name=&quot;mypic&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;progress&quot;&gt;
            &lt;span class=&quot;bar&quot;&gt;&lt;/span&gt;&lt;span class=&quot;percent&quot;&gt;0%&lt;/span &gt;
        &lt;/div&gt;
        &lt;div class=&quot;files&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;showimg&quot;&gt;&lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
$(function () {
    var bar = $(&#39;.bar&#39;);
    var percent = $(&#39;.percent&#39;);
    var showimg = $(&#39;#showimg&#39;);
    var progress = $(&quot;.progress&quot;);
    var files = $(&quot;.files&quot;);
    var btn = $(&quot;.btn span&quot;);
    $(&quot;#fileupload&quot;).wrap(&quot;&lt;form id=&#39;myupload&#39; action=&#39;action.php&#39; method=&#39;post&#39; enctype=&#39;multipart/form-data&#39;&gt;&lt;/form&gt;&quot;);
    $(&quot;#fileupload&quot;).change(function(){
        $(&quot;#myupload&quot;).ajaxSubmit({
            dataType:  &#39;json&#39;,
            beforeSend: function() {
                showimg.empty();
                progress.show();
                var percentVal = &#39;0%&#39;;
                bar.width(percentVal);
                percent.html(percentVal);
                btn.html(&quot;上传中...&quot;);
            },
            uploadProgress: function(event, position, total, percentComplete) {
                var percentVal = percentComplete + &#39;%&#39;;
                bar.width(percentVal);
                percent.html(percentVal);
            },
            success: function(data) {
                files.html(&quot;&lt;b&gt;&quot;+data.name+&quot;(&quot;+data.size+&quot;k)&lt;/b&gt; &lt;span class=&#39;delimg&#39; rel=&#39;&quot;+data.pic+&quot;&#39;&gt;删除&lt;/span&gt;&quot;);
                var img = &quot;http://demo.com/upload/files/&quot;+data.pic;
                showimg.html(&quot;&lt;img src=&#39;&quot;+img+&quot;&#39;&gt;&quot;);
                btn.html(&quot;添加附件&quot;);
            },
            error:function(xhr){
                btn.html(&quot;上传失败&quot;);
                bar.width(&#39;0&#39;)
                files.html(xhr.responseText);
            }
        });
    });

    $(&quot;.delimg&quot;).live(&#39;click&#39;,function(){
        var pic = $(this).attr(&quot;rel&quot;);
        $.post(&quot;action.php?act=delimg&quot;,{imagename:pic},function(msg){
            if(msg==1){
                files.html(&quot;删除成功.&quot;);
                showimg.empty();
                progress.hide();
            }else{
                alert(msg);
            }
        });
    });
});
&lt;/script&gt;


&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h3 id="5.4">完整版 action.php</h3>
<pre><code>&lt;?php
    error_reporting(0);

    $action = $_GET[&#39;act&#39;];
    if($action==&#39;delimg&#39;){
        $filename = $_POST[&#39;imagename&#39;];
        if(!empty($filename)){
            unlink(&#39;files/&#39;.$filename);
            echo &#39;1&#39;;
        }else{
            echo &#39;删除失败.&#39;;
        }
    }else{
        $picname = $_FILES[&#39;mypic&#39;][&#39;name&#39;];
        $picsize = $_FILES[&#39;mypic&#39;][&#39;size&#39;];
        if ($picname != &quot;&quot;) {
            if ($picsize &gt; 1024000) {
                echo &#39;图片大小不能超过1M&#39;;
                exit;
            }
            $type = strstr($picname, &#39;.&#39;);
            if ($type != &quot;.gif&quot; &amp;&amp; $type != &quot;.jpg&quot;) {
                echo &#39;图片格式不对！&#39;;
                exit;
            }
            $rand = rand(100, 999);
            $pics = date(&quot;YmdHis&quot;) . $rand . $type;
            //上传路径
            $pic_path = &quot;files/&quot;. $pics;
            move_uploaded_file($_FILES[&#39;mypic&#39;][&#39;tmp_name&#39;], $pic_path);
        }
        $size = round($picsize/1024,2);
        $arr = array(
            &#39;name&#39;=&gt;$picname,
            &#39;pic&#39;=&gt;$pics,
            &#39;size&#39;=&gt;$size
        );
        echo json_encode($arr);
    }
?&gt;</code></pre>

<h2 id="6">登录模块-代码分析</h2>
<h3 id="6.1">LoginController.class.php</h3>
<p>位置：/Application/Admin/Controller/LoginController.class.php  </p>
<h4 id="6.1.1">login.html(ajax精简版)</h4>
<p>1.1<br>下边这段代码是检测浏览器的版本的！<br>代码如下：  </p>
<pre><code>function detectBrowser() {
    var browser = navigator.appName
    if (navigator.userAgent.indexOf(&quot;MSIE&quot;) &gt; 0) {?
        var b_version = navigator.appVersion
        var version = b_version.split(&quot;;&quot;);
        var trim_Version = version[1].replace(/[ ]/g, &quot;&quot;);
        if ((browser == &quot;Netscape&quot; || browser == &quot;Microsoft Internet Explorer&quot;)) {
            if (trim_Version == &#39;MSIE8.0&#39; || trim_Version == &#39;MSIE7.0&#39; || trim_Version == &#39;MSIE6.0&#39;) {
                alert(&#39;请使用IE9.0版本以上进行访问&#39;);
                return;
            }
        }
    }
}
detectBrowser();</code></pre>
<p>结果如图：<br><img src="images/login01.png" alt=""></p>
<p>1.2  bootstrap<br>说明：一个css和js开源框架  </p>
<p>1.3 AdminLTE.min.css
说明：基于Bootstrap的控制面板</p>
<p>1.4 blue.css
说明：</p>
<h4 id="6.1.2">login.html(ajax完整版)</h4>
<h4 id="6.1.3">login.html(form传参精简版)</h4>
<h3 id="6.2">login.html(form完整版)</h3>


</article>
<footer>
<p>© 2016 龙之翼网络科技</p>

</footer>
</body>
</html>
